import { Inject } from '../decorates/inject';
import { BindEvent, click } from '../decorates/event';
import { Draw } from './draw';
import { createDom } from '../utils/index';
import { ISelectRange } from '../interfaces/generate';
import { IZCustomEvent } from '../interfaces/event';
import { Events } from './events';
import { Config } from './config';
import { IBorderStyle } from '../interfaces/styles';
import { Subject } from 'rxjs';
@Inject()
export class Select {
    protected selectContainer: HTMLElement;
    boders: HTMLElement[] = [];
    protected _selectRanges: ISelectRange[] = [];
    public selectedChange: Subject<ISelectRange[]> = new Subject();
    constructor(protected draw: Draw, protected event: Events, protected conf: Config) {
        this.draw.sub.subscribe(ev => {
            if (ev == 'afterDomInit') {
                this.initDom();
            }
        });
        this.draw.sub.subscribe(() => {
            this.draw.container.addEventListener('zClick', function (er) {
                // console.log(er)
            });
            this.event.clickEvt.subscribe(ev => {
                this.singleSelect(ev);
            });
            this.event.dbclickEvt.subscribe(ev => {
                this.singleSelect(ev);
            });
            this.multiSelect();
        });
    }
    public get selectRanges() {
        return this._selectRanges;
    }
    public set selectRanges(val: ISelectRange[]) {
        this._selectRanges = val;
        // console.log(val.length);
        // if (val.length == 0) {

        // } else {
        //     let range = {
        //         start: {
        //             row: Math.min(val[0].start.row, val[0].end.row),
        //             col: Math.min(val[0].start.col, val[0].end.col)
        //         },
        //         end: {
        //             row: Math.max(val[0].start.row, val[0].end.row),
        //             col: Math.max(val[0].start.col, val[0].end.col)
        //         }
        //     };
        //     this.conf.traverseCells({row: range.start.row, col: range.start.col}, {row: range.end.row, col: range.end.col}, (cell) => {
        //         range.start.row = Math.min(range.start.row, cell.merge.row);
        //         range.start.col = Math.min(range.start.col, cell.merge.col);
        //         range.end.row = Math.max(range.end.row, cell.merge.row + cell.merge.rowspan - 1);
        //         range.end.col = Math.max(range.end.col, cell.merge.col + cell.merge.colspan - 1)
        //         return cell;
        //     });
        //     this._selectRanges = [range]
        // }
        this.drawSelectArea();
        this.selectedChange.next(this._selectRanges);
    }
    public zInit() {
        this.conf.visualAreaChange.subscribe(() => {
            this.drawSelectArea();
        });
    }
    protected drawSelectArea() {
        let val = this.selectRanges;
        if (val.length == 0) return;
        let range = {
            start: {
                row: Math.min(val[0].start.row, val[0].end.row),
                col: Math.min(val[0].start.col, val[0].end.col)
            },
            end: {
                row: Math.max(val[0].start.row, val[0].end.row),
                col: Math.max(val[0].start.col, val[0].end.col)
            }
        };
        this.conf.traverseCells({row: range.start.row, col: range.start.col}, {row: range.end.row, col: range.end.col}, (cell) => {
            range.start.row = Math.min(range.start.row, cell.merge.row);
            range.start.col = Math.min(range.start.col, cell.merge.col);
            range.end.row = Math.max(range.end.row, cell.merge.row + cell.merge.rowspan - 1);
            range.end.col = Math.max(range.end.col, cell.merge.col + cell.merge.colspan - 1)
            return cell;
        });        
        // let range = val[0];
        range.start.row = Math.max(range.start.row, this.conf.startRow);
        range.start.col = Math.max(range.start.col, this.conf.startCol);
        range.end.row = Math.min(range.end.row, this.conf.visualMaxRow);
        range.end.col = Math.min(range.end.col, this.conf.visualMaxCol);
        let ctx = this.draw.operateCas.getContext('2d') as CanvasRenderingContext2D;
        ctx.clearRect(0, 0, this.draw.operateCas.width, this.draw.operateCas.height);
        if(
            range.end.row < this.conf.startRow ||
            range.end.col < this.conf.startCol ||
            range.start.row > this.conf.visualMaxRow ||
            range.start.col > this.conf.visualMaxCol
            ) {
            return
        }
        console.log(range)
        const borderStyle: IBorderStyle = { color: 'rgb(75, 137, 255)', type: 'thin', width: 2 };
        let startX = this.conf.getColWidth(this.conf.startCol, range.start.col) + range.start.col - this.conf.startCol + this.conf.colHeaderWidth + 1;
        let startY = this.conf.getRowHeight(this.conf.startRow, range.start.row) + range.start.row - this.conf.startRow + this.conf.rowHeaderHeight + 1;
        let endX = this.conf.getColWidth(range.start.col, range.end.col + 1) + range.end.col - range.start.col + startX + 1;
        let endY = this.conf.getRowHeight(range.start.row, range.end.row + 1) + range.end.row - range.start.row + startY + 1;
        this.draw.line({ x: startX, y: startY }, { x: endX, y: startY }, borderStyle, ctx);
        this.draw.line({ x: startX, y: startY }, { x: startX, y: endY }, borderStyle, ctx);
        this.draw.line({ x: endX, y: startY }, { x: endX, y: endY }, borderStyle, ctx);
        this.draw.line({ x: startX, y: endY }, { x: endX, y: endY }, borderStyle, ctx);
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle = "rgba(75, 137, 255, 0.1)";
        ctx.fillRect(startX + 1, startY + 1, endX - startX - 1, endY - startY - 1);
        ctx.restore();
    }
    protected singleSelect(ev: CustomEvent<IZCustomEvent>) {

    }
    protected multiSelect() {
        let range: ISelectRange = { start: { row: 0, col: 0 }, end: { row: 0, col: 0 } };
        this.event.dragStartEvt.subscribe(ev => {
            range.start.row = ev.detail.row;
            range.start.col = ev.detail.col;
            range.end.row = ev.detail.row;
            range.end.col = ev.detail.col;
            this.selectRanges = [{
                start: {
                    row: range.start.row,
                    col: range.start.col
                },
                end: {
                    row: range.end.row,
                    col: range.end.col
                }
            }]
        });
        this.event.dragMoveEvt.subscribe(ev => {
            range.end.row = ev.detail.row;
            range.end.col = ev.detail.col;
            this.selectRanges = [{
                start: {
                    row: range.start.row,
                    col: range.start.col
                },
                end: {
                    row: range.end.row,
                    col: range.end.col
                }
            }]
        });
        this.event.dragEndEvt.subscribe(ev => {
            range = { start: { row: 0, col: 0 }, end: { row: 0, col: 0 } };
            // this.selectRanges = [];
        });
    }
    protected initDom() {
        // this.selectContainer = createDom('div', {}, {'class': 'zxlsx-select-container'});
        // this.draw.extraContent.appendChild(this.selectContainer);
        // this.selected();
    }
}